<template>
  <div class="app-container">
    <el-row :gutter="15">
      <!-- 菜单授权 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
        <el-row>
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <el-tooltip class="item" effect="dark" content="请选择指定专业" placement="top">
                <span class="role-span">专业列表</span>
              </el-tooltip>
            </div>
            <el-tree
              ref="tree"
              :data="specialty"
              show-checkbox
              empty-text="暂无查询到专业列表"
              node-key="id"
              @check="selectSpecialty"
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
            />
          </el-card>
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <el-tooltip class="item" effect="dark" content="请选择指定教学计划" placement="top">
                <span class="role-span">班级列表</span>
              </el-tooltip>
              <el-select @change="selectGrade" style="margin-left: 50px" v-model="gradeId" placeholder="请选择">
                <el-option
                  v-for="item in grade"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <el-tree
              ref="planTree"
              :data="classes"
              show-checkbox
              empty-text="暂无查询到班级"
              node-key="id"
              @check="selectClass"
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              :props="{label:'classname'}"
            />
          </el-card>
        </el-row>
      </el-col>
      <!--课程管理-->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">课程列表</span>
            <el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 10px" @click="addCourse"
                       :disabled="this.classesId == null ? true : false">添加课程
            </el-button>
          </div>

          <el-table
            ref="table"
            highlight-current-row
            style="width: 100%;"
            :data="courseData"
            empty-text="暂时无课程"
            current-row-key="id"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="id" label="课程编码" align="center" show-overflow-tooltip=""/>
            <el-table-column prop="name" label="课程名称" min-width="150"/>
            <el-table-column prop="classroom" label="上课教室" min-width="100" align="center"/>
            <el-table-column prop="p" label="上课时间" min-width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.sw}} {{scope.row.sse}}
              </template>
            </el-table-column>
            <el-table-column prop="totalTime" label="总学时" align="center"/>
            <el-table-column prop="credit" label="学分" align="center"/>
            <el-table-column prop="teacherName" label="上课教师" min-width="100"/>
            <el-table-column prop="wname" label="上课周数" min-width="100"/>
            <el-table-column prop="tname" label="上课学期" min-width="100"/>
            <el-table-column
              label="操作"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <el-row>
                  <el-col :push="8" :span="10">
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="subDelete(scope.row.id)">删除
                    </el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <el-pagination
            :total="total"
            :current-page="params.offset"
            style="margin-top: 8px;"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, prev, pager, next, sizes"
            @size-change="sizeChange"
            @current-change="pageChange"
          />
        </el-card>
      </el-col>
      <!--表单组件-->
      <e-from ref="form" :is-add="isAdd" @close="loadPlan()"/>
      <d-from ref="dFrom" :is-add="isAdd" @close="load()"/>
      <!--课程列表组件-->
      <course-list ref="courseList" @close="loadCourse()"></course-list>
    </el-row>
  </div>
</template>

<script>
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import service from '../../../utils/request'
  import eFrom from './form'
  import dFrom from './dFrom'
  import {listajaxSpecialty, listajax, pageQueryPlanCourse, delPlanCourse} from '@/api/admin/plan/plan'
  import classes from '@/api/admin/classes/classes'
  import course from '@/api/admin/course/course'
  import common from '@/api/common/common'
  import courseList from './courseList'

  // crud交由presenter持有
  export default {
    name: 'Role',
    components: {
      eFrom,
      dFrom,
      courseList
    },
    data() {
      return {
        total: 0,
        currentId: 0, menuLoading: false,
        defaultProps: {
          label: 'name'
        },
        courseData: [],
        params: {
          offset: 1,
          limit: 10,
          keyword: null,
          status: null,
          gradeId: null,
          specialyId: null
        },
        grade: [],
        specialty: [],
        classes: [],
        isAdd: true,
        loading: true,
        specialtyId: null,
        classesId: null,
        gradeId: null
      }
    },
    created() {
      listajaxSpecialty().then(res => {
        this.specialty = res
      })
      common.listajaxGrade().then(res => {
        this.grade = res
      })
    },
    methods: {
      load() {
        course.findClassCoure(this.params).then(res => {
          this.courseData = res.records
          this.params.offset = res.current
          this.total = res.total
        })
      },
      sizeChange(val) {
        this.params.limit = val
        this.load()
      },
      pageChange(val) {
        this.params.offset = val
        this.load()
      },
      loadRole() {
        service.get('/api/role/pageQuery', {params: this.params}).then(res => {
          this.roleData = res.records
          this.loading = false
          this.params.offset = res.current
          this.total = res.realTotal
        })
      },
      // 保存菜单
      addPlan() {
        this.isAdd = true
        this.$refs.form.dialog = true
        this.$refs.form.form['specialtyId'] = this.specialtyId
      },
      add() {
        this.isAdd = true
        this.$refs.form.dialog = true
      },
      edit(data) {
        this.isAdd = false
        const _this = this.$refs.form
        _this.form = {
          id: data.id,
          name: data.name,
          code: data.code,
          description: data.description
        }
        _this.dialog = true
      },
      loadPlan() {
        listajax(this.specialtyId).then(res => {
          this.plan = res
        })
      },
      loadCourse() {
        pageQueryPlanCourse(this.params).then(res => {
          this.courseData = res.records
          this.params.offset = res.current
          this.total = res.total
        })
      },
      selectSpecialty(node, key, halfNode, halfKey) {
        if (key.checkedKeys.length == 0) {
          this.specialtyId = null
          this.plan = null
        } else {
          this.$refs.tree.setCheckedKeys([node.id]);
          this.specialtyId = node.id
          classes.findBySpecialty({specialtyId: this.specialtyId, gradeId: this.gradeId}).then(res => {
            this.classes = res
          })
        }
      },
      selectClass(node, key, halfNode, halfKey) {
        if (key.checkedKeys.length == 0) {
          this.classesId = null
          this.courseData = null
        } else {
          this.$refs.planTree.setCheckedKeys([node.id]);
          this.classesId = node.id
          this.params.classesId = this.classesId
          this.load();
        }
      },
      addCourse(val) {
        this.$refs.dFrom.dialog = true
        this.$refs.dFrom.load()
        this.$refs.dFrom.form['classesId'] = this.classesId
      },
      subDelete(id) {
        this.$confirm('确定进行此操作吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          course.teacherCourseDelete(id).then(res => {
            this.$notify({
              title: '成功',
              type: 'success',
              duration: 2500
            })
            this.loadCourse()
          }).catch(err => {
            console.log(err.response.data.message)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      selectGrade(val) {
        this.params.gradeId = val
        this.gradeId = val
        classes.findBySpecialty({specialtyId: this.specialtyId, gradeId: this.gradeId}).then(res => {
          this.classes = res
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .role-span {
    font-weight: bold;
    color: #303133;
    font-size: 15px;
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
